<template>
  <div id="userIndex">
    <div class="container">
      <div class="top">
        <div class="left">
          <i class="iconfont icon-icon-respon" style="font-size: 30px"></i>
          <span>公告</span>
        </div>
        <div class="item">
          <i>碳核算处理时间通知！</i>
          <i>请尽快完成今天的碳核算</i>
        </div>
        <div class="right" style="font-size: 14px">更多公告<i>></i></div>
      </div>
      <div class="center">
        <div class="ctop">
          <div>
            <el-avatar
              :size="80"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>

          <el-space :size="760">
            <h1>你好，用户{{ user.getUserAccount }}</h1>
            <el-button type="warning" @click="logout">退出 </el-button>
          </el-space>
        </div>
        <div style="margin-left: 1%">
          <el-space :size="30">
            <el-card style="width: 370px; height: 120px">
              <div>
                <h1 style="text-align: center">碳配额</h1>
                <h5 style="text-align: center; color: red" v-if="emission == 0">
                  请尽快完成企业认证!!!
                </h5>
              </div>

              <div style="margin-left: 38%; margin-top: 8%">{{ emission }} (t CO2e)</div>
            </el-card>
            <el-card style="width: 370px; height: 120px">
              <div>
                <h1 style="text-align: center">碳排放量</h1>
                <h5 style="text-align: center; color: red" v-if="carbonEmission == 0">
                  请尽快完成碳核算!!!
                </h5>
              </div>

              <div style="margin-left: 38%; margin-top: 8%">{{ carbonEmission }} (t CO2e)</div>
            </el-card>

            <el-card style="width: 370px; height: 120px">
              <div>
                <h1 style="text-align: center">可交易碳配额</h1>
                <h5 style="text-align: center; color: red" v-if="carbonEmission == 0">
                  请尽快完成碳核算!!!
                </h5>
              </div>

              <div style="margin-left: 38%; margin-top: 8%">{{ transationEmission }} (t CO2e)</div>
            </el-card>
          </el-space>
        </div>
      </div>
      <div style="margin-top: 2%; margin-bottom: 2%; margin-left: 1%">
        <el-space :size="30">
          <el-card style="width: 270px; height: 150px">
            <el-space direction="vertical" fill wrap style="margin-left: 30%">
              <span>碳币充值</span>
              <el-icon size="70">
                <Postcard />
              </el-icon>
            </el-space>
          </el-card>
          <el-card style="width: 270px; height: 150px">
            <el-space direction="vertical" fill wrap style="margin-left: 30%">
              <span>碳币提现</span>
              <el-icon size="70">
                <Wallet />
              </el-icon>
            </el-space>
          </el-card>
          <el-card style="width: 270px; height: 150px">
            <el-space direction="vertical" fill wrap style="margin-left: 30%">
              <span>企业认证</span>
              <el-icon size="70">
                <CircleCheckFilled />
              </el-icon>
            </el-space>
          </el-card>
          <el-card style="width: 270px; height: 150px">
            <el-space direction="vertical" fill wrap style="margin-left: 30%">
              <span>修改密码</span>
              <el-icon size="70">
                <EditPen />
              </el-icon>
            </el-space>
          </el-card>
        </el-space>
      </div>
      <div style="margin-bottom: 1%">
        <el-space :size="250">
          <el-button type="primary" style="margin-left: 90%" @click="onRecharge"
            >碳币充值
          </el-button>
          <el-button type="primary" style="margin-left: 60%" @click="onWithdrawal"
            >碳币提现
          </el-button>
          <el-button type="primary" style="margin-left: 10%" @click="onAuthentication"
            >企业认证
          </el-button>
          <el-button type="primary" style="margin-left: -30%" @click="onEditPassword"
            >修改密码
          </el-button>
        </el-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { CircleCheckFilled, EditPen, Postcard, Wallet } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { CompanyUserControllerService, UserControllerService } from '../../../generated'
import {
  addBalance,
  getCarbonEmission,
  getCompanyEmission,
  getEmission,
  getTransationEmission
} from '@/utils/useWeb3'

const user = useUserStore()
const router = useRouter()
const carbonEmission = ref(0)
const transationEmission = ref(0)
const emission = ref(0) // 分配的碳配额
const wallet = reactive(JSON.parse(localStorage.getItem('wallet') as string) || {})
const account = ref(wallet.address ? wallet.address : '')

/**
 * 获取可交易的碳配额,碳排放
 */
const getAll = async () => {
  //1.获取企业碳排放信息
  const res = await getCarbonEmission(account.value, '2024')
  //2.获取企业可交易的碳配额
  const res2 = await getTransationEmission(account.value)
  //3.获取企业的碳配额
  const res4 = await getCompanyEmission(account.value)

  if (res4.status === 0) {
    console.log('获取企业碳配额', res4)

    emission.value = res4.emission
  } else {
    ElMessage({
      message: '获取碳配额信息错误',
      type: 'error'
    })
  }

  if (res.status != 0) {
    ElMessage({
      message: '获取碳排放信息错误',
      type: 'error'
    })
  } else {
    carbonEmission.value = res.carbonEmission
  }

  if (res2.status != 0) {
    ElMessage({
      message: '获取可交易的碳配额信息错误',
      type: 'error'
    })
  } else {
    transationEmission.value = res2.transationEmission
  }
}
watchEffect(() => {
  user.setTransationEmission(transationEmission.value)
})
/**
 * 碳币充值
 */
const onRecharge = () => {
  ElMessageBox.prompt('请输入碳币数量', '充值', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel'
  })
    .then(async ({ value }) => {
      // console.log(value)
      const res = await addBalance(wallet.address, value)
      console.log(res)
      if (res.status === 0) {
        ElMessage({
          type: 'success',
          message: `成功充值碳币:${value}`
        })
      } else {
        ElMessage({
          type: 'error',
          message: `成功充值碳币:${value}` + '-区块链异常'
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Input canceled'
      })
    })
}
/**
 * 碳币提现
 */
const onWithdrawal = () => {}
/**
 * 企业认证
 */
const onAuthentication = () => {
  router.push({
    path: '/user/enterpriseCertification'
  })
}

/**
 * 修改密码
 */
const onEditPassword = () => {}
/**
 * 退出登录
 */
const logout = async () => {
  //1.删除user
  user.clearUser()
  //2.删除hasLogin，删除user
  localStorage.removeItem('hasLogin')
  localStorage.removeItem('user')
  localStorage.removeItem("wallet")
  //3.退出
  await UserControllerService.userLogoutUsingPost()
  //4.跳转
  router.push({
    path: '/login'
  })
}

onMounted(() => {
  getAll()
})
</script>
<style scoped>
#userIndex {
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
  height: 100%;
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  width: 95%;
  flex-direction: column;
  height: 100%;
}

.container .top {
  display: flex;
  height: 80px;
  width: 100%;
  border: 1px solid orange;
}

.center {
  display: flex;
  flex-direction: column;
}

.container .top .left {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 60px;
  margin-left: 1%;
  justify-content: center;
  /* background: red; */
  text-align: center;
  color: red;
}

.container .top .item {
  flex: 1;
  font-size: 13px;
  line-height: 80px;
  /* background: red; */
}

.container .top .right {
  float: right;
  line-height: 80px;
  margin-right: 10px;
}

.center .ctop {
  height: 100px;
  display: flex;
  margin-top: 15px;
}

.center .ctop .exit {
  display: block;
  height: 50px;
  margin-top: 25px;
  line-height: 50px;
  border: 1px solid red;
  margin-left: 40%;
  background-color: rgb(255, 238, 221);
}

.center .ctop div {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.center .ctop div:nth-child(1) {
  width: 120px;
}

.center .ctop div:nth-child(2) {
  flex: 1;
}

.center .ctop div:nth-child(3) {
  width: 100px;
}

.center .cbottom {
  display: flex;
  justify-content: space-between;
}

.center .cbottom div {
  width: 30%;
  background-color: rgb(255, 232, 219);
  height: 157px;
  margin-top: 15px;
  border-radius: 10px;
}

.footer .fcontainer {
  height: 200px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.footer .fcontainer > div {
  width: 20%;
  height: 200px;
}

.footer .fcontainer .ftop {
  display: flex;
  font-size: 13px;
}

.footer .fcontainer .ftop i {
  width: 25%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 24px;
}

.footer .fcontainer .ftop span {
  width: 75%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
}

.footer .fcontainer .fbottom div:nth-child(1) {
  height: 120px;
  background-color: rgb(231, 231, 231);
  border-radius: 10px;
}

.footer .fcontainer .fbottom div:nth-child(2) {
  height: 40px;
  background: pink;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  border-radius: 10px;
  color: white;
}

.footer .fcontainer .fbottom i {
  display: block;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 48px;
}

.footer .fcontainer .fbottom span {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>
